<template>
  <div>
    <!-- router-view如果没有设置名称，那么默认为default  -->
    <router-view class="view one"></router-view>
    <router-view class="view two" name="a"></router-view>
    <router-view class="view three" name="b"></router-view>

    <!-- UserSettings.vue -->
    <div>
      <h1>User Settings</h1>
      <NavBar />
      <router-view />
      <router-view name="helper" />
    </div>
  </div>
</template>

<script>
// 一个路由渲染一个视图，使用component，如果一个路由需要渲染多个视图，需要使用components
const router = new VueRouter({
  routes: [
    {
      path: '/',
      components: {
        default: Foo,
        a: Bar,
        b: Baz
      }
    }
  ]
})

// 嵌套命名视图
{
  path: '/settings',
  // 你也可以在顶级路由就配置命名视图
  component: UserSettings,
    children: [{
      path: 'emails',
      component: UserEmailsSubscriptions
    }, {
      path: 'profile',
      components: {
        default: UserProfile,
        helper: UserProfilePreview
      }
    }]
}

</script>
